<template id="tpl-alert">
	<div class="alert bg-white alert-show" role="alert">
		<div class="d-flex">
			<div class="alert-icon"></div>
			<div>
				<h4 class="alert-title"></h4>
				<div class="text-secondary"></div>
			</div>
		</div>
		<div class="alert-timer-progress-bar-container"> 
			<div class="alert-timer-progress-bar"></div>
		</div>
	</div>
</template>

<template id="tpl-dropdown-toggles">
	<div class="d-flex dropdown-options">
		<label class="dropdown-item select-all">
			<svg xmlns="http://www.w3.org/2000/svg"
				class="icon icon-tabler icon-tabler-checks" width="24" height="24"
				viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
				fill="none" stroke-linecap="round" stroke-linejoin="round">
				<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
				<path d="M7 12l5 5l10 -10"></path>
				<path d="M2 12l5 5m5 -5l5 -5"></path>
			</svg>
			All
		</label>
		<label class="dropdown-item select-none">
			<svg xmlns="http://www.w3.org/2000/svg"
				class="icon icon-tabler icon-tabler-square" width="24" height="24"
				viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
				fill="none" stroke-linecap="round" stroke-linejoin="round">
				<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
				<rect x="4" y="4" width="16" height="16" rx="2"></rect>
			</svg>
			None
		</label>
	</div>
</template>

<template id="tpl-dropdown-checkbox">
	<label class="dropdown-item">
		<input type="checkbox" class="form-check-input m-0 me-2">
	</label>
</template>


<template id="tpl-datepicker">
	<div class="date-input-container mb-3">
		<label class="form-label">Date</label>
		<div class="input-group flex-nowrap mb-3">
			<div class="input-icon">
				<span class="input-icon-addon">
					<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24"
						viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
						stroke-linecap="round" stroke-linejoin="round">
						<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
						<rect x="4" y="5" width="16" height="16" rx="2"></rect>
						<line x1="16" y1="3" x2="16" y2="7"></line>
						<line x1="8" y1="3" x2="8" y2="7"></line>
						<line x1="4" y1="11" x2="20" y2="11"></line>
						<line x1="11" y1="15" x2="12" y2="15"></line>
						<line x1="12" y1="15" x2="12" y2="18"></line>
					</svg>
				</span>
				<input class="form-control date-input" placeholder="Date" readonly>
			</div>
			<div class="sort-container">
				<select size="1" class="form-select date-sort">
					<option value="DESC" title="Newest first">
						Desc
					</option>
					<option value="ASC" title="Oldest first">
						Asc
					</option>
					<option value="NEAR" title="Closest first">
						Near
					</option>
				</select>
			</div>
		</div>
	</div>
</template>


<template id="tpl-filter-dropdown">
	<div class="dropdown">
		<button class="btn dropdown-toggle" data-bs-toggle="dropdown"
			data-bs-auto-close="outside"></button>
		<div class="dropdown-menu">
			
		</div>
	</div>
</template>

<template id="tpl-filter-dropdown-static">
	<div class="dropdown-menu">
		<h6 class="dropdown-header sticky-top"></h6>
	</div>
</template>


<template id="tpl-pagination">
	<div class="pagination align-items-center justify-content-end gap-3">
		<div class="page-number text-secondary">
			Page
		</div>
		
		<div class="btn-list">
			<a class="btn page-prev disabled">
				<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24"
					viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
					stroke-linecap="round" stroke-linejoin="round">
					<path stroke="none" d="M0 0h24v24H0z" fill="none">
					</path>
					<polyline points="15 6 9 12 15 18"></polyline>
				</svg>
				Previous
			</a>
			<a class="btn page-next disabled">
				Next
				<svg xmlns="http://www.w3.org/2000/svg" class="icon ms-2 me-0" width="24" height="24"
					viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
					stroke-linecap="round" stroke-linejoin="round">
					<path stroke="none" d="M0 0h24v24H0z" fill="none">
					</path>
					<polyline points="9 6 15 12 9 18"></polyline>
				</svg>
			</a>
		</div>
	</div>
</template>

<template id="tpl-timeline">
	<ul class="list list-timeline">
		
	</ul>
</template>

<template id="tpl-tl-item-card">
	<li class="list-timeline-card-item">
		<div class="list-timeline-icon">

		</div>
		<div class="list-timeline-content">
			<div class="list-timeline-time-container">
				<div class="list-timeline-time">

				</div>
			</div>
			<div class="list-timeline-content-container">

			</div>
		</div>
	</li>
</template>

<template id="tpl-tl-item-date-card">
	<div class="list-timeline-date-anchor">
		<li class="list-timeline-card-item list-timeline-date-card">
			<div class="list-timeline-content">
				<div class="list-timeline-time-container">
					<div class="list-timeline-date">
						
					</div>
				</div>
			</div>
		</li>
	</div>
</template>

<template id="map-container">
	<div class="map-container content rounded overflow-hidden ratio">
		<div class="map-placeholder d-flex align-items-center justify-content-center bg-muted-lt">
			Hover to activate map
		</div>
	</div>
</template>

<template id="loader-container">
	<!-- The "supercontainer" can contain the image/video that is being loaded, then we fade out the loader for a nice effect. -->
	<div class="loader-supercontainer">
		<div class="loader-container bg-muted-lt">
			<div class="loader-container-content">
				<svg class="loader" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
					viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
					<g>
						<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite"
							values="0 50 50;360 50 50" keyTimes="0;1" dur="0.625s"></animateTransform>
						<path fill-opacity="0.49" fill="#004d73" d="M50 50L50 0A50 50 0 0 1 100 50Z"></path>
					</g>
					<g>
						<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite"
							values="0 50 50;360 50 50" keyTimes="0;1" dur="0.8s"></animateTransform>
						<path fill-opacity="0.49" fill="#00334e" d="M50 50L50 0A50 50 0 0 1 100 50Z"
							transform="rotate(90 50 50)"></path>
					</g>
					<g>
						<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite"
							values="0 50 50;360 50 50" keyTimes="0;1" dur="1.25s"></animateTransform>
						<path fill-opacity="0.49" fill="#007fdb" d="M50 50L50 0A50 50 0 0 1 100 50Z"
							transform="rotate(180 50 50)"></path>
					</g>
					<g>
						<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite"
							values="0 50 50;360 50 50" keyTimes="0;1" dur="2.5s"></animateTransform>
						<path fill-opacity="0.49" fill="#dbebfa" d="M50 50L50 0A50 50 0 0 1 100 50Z"
							transform="rotate(270 50 50)"></path>
					</g>
				</svg>

				<div class="loading-message text-secondary">Loading</div>
			</div>
		</div>
	</div>
</template>

<template id="tpl-media-card">
	<div class="minidisp-media">

	</div>
</template>


<template id="tpl-message">
	<div class="chat-item">
		<div class="row align-items-top">
			<div class="col-auto message-avatar mt-3">
				<!-- avatar -->
			</div>
			<div class="col col-lg-9">
				<div class="chat-bubble">
					<div class="chat-bubble-title">
						<div class="row">
							<div class="col chat-bubble-author message-sender">
								<!-- name -->
							</div>
							<div class="col-auto chat-bubble-date message-timestamp">
								<!-- timestamp -->
							</div>
							<div class="col-auto message-data-source small">
								<span class="data-source-icon avatar avatar-xxs align-middle"></span>
							</div>
						</div>
					</div>
					<div class="chat-bubble-body">
						<div class="message-content">
							<!-- content -->
						</div>
						<div class="attachments mt-2 d-none">
							<!-- attachments -->
						</div>
						<div class="message-reactions mt-2 d-flex d-none">
							<!-- reactions -->
						</div>
					</div>
				</div>
			</div>
			<div class="col-auto lh-1 align-self-center">
				<div class="dropdown">
					<a href="#" class="link-secondary" data-bs-toggle="dropdown" aria-expanded="false">
						<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24"
							viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
							stroke-linecap="round" stroke-linejoin="round">
							<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
							<circle cx="5" cy="12" r="1"></circle>
							<circle cx="12" cy="12" r="1"></circle>
							<circle cx="19" cy="12" r="1"></circle>
						</svg>
					</a>
					<div class="dropdown-menu dropdown-menu-end">
						<a class="dropdown-item view-item-link">
							View item
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<template id="tpl-compact-preview">
	<div class="compact">
		
	</div>
</template>

<template id="tpl-map-popup">
	<div class="map-preview-popup">
		<div class="map-preview-coordinates"></div>
		<div class="map-preview-timestamp"></div>
	</div>
</template>


<template id="tpl-map-marker">
	<div class="map-marker">
		<svg width="32" height="50" viewBox="0 0 32 50" version="1.1" xmlns="http://www.w3.org/2000/svg"
			xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/"
			style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;">
			<ellipse cx="16.55" cy="44.107" rx="14.458" ry="5.239" style="fill:url(#shadow);" />
			<path
				class="pin"
				d="M16.113,44.499C16.113,44.499 0.488,25.718 0.488,17.069C0.488,7.82 6.817,0.311 16.067,0.311C25.316,0.311 31.645,7.82 31.645,17.069C31.645,26.319 16.113,44.499 16.113,44.499Z" />
			<path
				class="pin-inside-stroke"
				d="M16.113,44.499C16.113,44.499 0.488,25.718 0.488,17.069C0.488,7.82 6.817,0.311 16.067,0.311C25.316,0.311 31.645,7.82 31.645,17.069C31.645,26.319 16.113,44.499 16.113,44.499ZM16.125,42.473C13.934,39.73 8.54,32.748 4.994,26.196C3.145,22.781 1.774,19.506 1.774,17.069C1.774,8.555 7.552,1.597 16.067,1.597C24.581,1.597 30.359,8.555 30.359,17.069C30.359,19.68 28.998,23.031 27.157,26.466C23.647,33.013 18.313,39.794 16.125,42.473Z"
				style="fill-opacity:0.2;" />
			<g class="marker-icon" stroke="#fff" fill="none" stroke-width="2" transform="translate(4,4)">
				
			</g>
			<circle class="more-dot d-none" r="6" cx="25" cy="7"></circle>
			<defs>
				<radialGradient id="shadow" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
					gradientTransform="matrix(14.4584,0,0,5.23888,16.5501,44.1075)">
					<stop offset="0" style="stop-color:#000;stop-opacity:0.4" />
					<stop offset="1" style="stop-color:#000;stop-opacity:0" />
				</radialGradient>
			</defs>
		</svg>
	</div>
</template>

<template id="tpl-file-picker">
	<div class="file-picker">
		<div class="input-group">
			<!-- <button type="button" class="btn" title="Up one folder">
				<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-back-up me-0" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
					<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
					<path d="M9 14l-4 -4l4 -4"></path>
					<path d="M5 10h11a4 4 0 1 1 0 8h-1"></path>
				</svg>
			</button> -->
			<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true"
				aria-expanded="false" title="Disk drives and mount points">
				<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-server-2 me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
					<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
					<path d="M3 4m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v2a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z"></path>
					<path d="M3 12m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v2a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z"></path>
					<path d="M7 8l0 .01"></path>
					<path d="M7 16l0 .01"></path>
					<path d="M11 8h6"></path>
					<path d="M11 16h6"></path>
				</svg>
			</button>
			<div class="file-picker-mount-points dropdown-menu">
	
			</div>
			<input type="text" class="file-picker-path form-control" autocomplete="off" placeholder="File or folder path">
		</div>
		<div class="file-picker-table table-responsive">
			<table class="table card-table">
				<thead>
					<tr>
						<th><button class="table-sort" data-sort="sort-name">Name</button></th>
						<th class="file-picker-col-size"><button class="table-sort" data-sort="sort-size">Size</button></th>
						<th><button class="table-sort" data-sort="sort-modified">Modified</button></th>
					</tr>
					<tr class="file-picker-up">
						<td class="sort-name" colspan="3">
							<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-back-up" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
								<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
								<path d="M9 14l-4 -4l4 -4"></path>
								<path d="M5 10h11a4 4 0 1 1 0 8h-1"></path>
							</svg>
							Up
						</td>
					</tr>
				</thead>
				<tbody class="table-tbody">
					
				</tbody>
			</table>
		</div>
	</div>
</template>

<template id="tpl-file-picker-item">
	<tr class="file-picker-item">
		<td class="sort-name"></td>
		<td class="sort-size file-picker-col-size"></td>
		<td class="sort-modified"></td>
	</tr>
</template>

<template id="tpl-job-preview">
	<div class="row align-items-center job-preview">
		<div class="col-auto job-icon">

		</div>
		<div class="col text-truncate">
			<a class="text-body d-block job-link">
				<b class="job-name"></b>
				<span class="job-name-suffix text-truncate"></span>
			</a>
			<div class="progress my-2 job-progress">
				<div class="progress-bar"></div>
			</div>
			<div class="d-block small text-secondary">
				<b>
					<span class="job-progress-text"></span>
					<span class="job-progress-units"></span>
				</b>
				in
				<b class="me-2 job-duration">n/a</b>
				<a class="pause-job mx-2 d-none">Pause</a><a class="unpause-job mx-2 d-none">Resume</a><a class="cancel-job mx-2 d-none">Cancel</a>
			</div>
		</div>
		<div class="col-auto">
			<span class="status-dot job-status-dot"></span>
		</div>
	</div>
</template>
